<template>
    <div>
        <!--维度设置-->
        <div class="dimension" style="margin-top: 20px">{{ numericalI18n('dimenSet', '维度设置') }}</div>
        <div class="dimension_come">
            <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.dataSources.dimensions"
                          :group="{name: 'site',pull:'clone'}" animation="300" dragClass="dragClass"
                          itemKey="fieldName"
                          ghostClass="ghostClass" chosenClass="chosenClass">
                <template #item="{ element:item,index }">
                    <div class="setup_tuo" @mouseenter="mouseenter(index,'dimensions')"
                         @mouseleave="mouseleave('null','dimensions')" :key="item.fieldName">
                        <rx-icon-show  :icon="getIcon(item)"  style="float:left;margin-top: 3px"/>
                        <span class="inpurlistspan" :title="item.fieldLabel">{{ item.fieldLabel }}</span>
                        <span class="icon_config" v-show="dimensionId ==index">
                            <rx-icon-show icon="icon-lineup" @click="up(index,'dimensions')"/>
                            <rx-icon-show icon="icon-linedown" @click="down(index,'dimensions')"/>
                            <rx-icon-show icon="icon-lineVue3_delete" @click="dimensionDelete(index,'dimensions')"/>
                        </span>
                    </div>
                </template>
            </vuedraggable>
            <div class="dimension_button" style="line-height: 30px;min-height:30px">
                {{ numericalI18n('dragRight', '从右侧拖入维度') }}
            </div>
        </div>
        <div>
            <!--度量设置-->
            <div class="dimension" style="margin-top: 20px">{{ numericalI18n('metricSet', '度量设置') }}</div>
            <div class="dimension_come">
                <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.dataSources.measures"
                              itemKey="fieldName"
                              :group="{name: 'measure'}" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                              chosenClass="chosenClass">
                    <template #item="{ element:item,index }">
                        <div class="setup_tuo" style="background: #9babed" @mouseenter="mouseenter(index,'measures')"
                             @mouseleave="mouseleave('null','measures')" :key="item.fieldName">
                            <rx-icon-show  :icon="getIcon(item)"  style="float:left;margin-top: 3px"/>
                            <a-input class="inpurlistinput" :title="item.fieldLabel"
                                     v-model:value="item.fieldLabel"></a-input>
                            <span class="icon_config" v-show="measuresId ==index">
                                <rx-icon-show icon="icon-lineup" @click="up(index,'measures')"/>
                                <rx-icon-show icon="icon-linedown" @click="down(index,'measures')"/>
                                <rx-icon-show v-if="measuresId ==index" icon="icon-lineVue3_delete"
                                              @click="dimensionDelete(index,'measures')"/>
								<span class="basics-render">
                                  <rx-icon-show icon="icon-lineVue3_setting" />
                                   <div class="basics-render-op">
                                       <span
                                           @click="setNumericalMeasurement(item,index,'measures')">{{ numericalI18n('metricSet', '度量设置') }}</span>
                                   </div>
                                </span>
                            </span>
                        </div>
                    </template>
                </vuedraggable>
                <div class="dimension_button" style="line-height: 30px;min-height:30px">
                    {{ numericalI18n('dragMetric', '从右侧拖入度量') }}
                </div>
            </div>
        </div>
        <div>
            <result-row-config v-model="config.dataSources.resultNum"></result-row-config>
        </div>
    </div>
</template>

<script>
/**
 * 数据配置
 */
import BasicsConfigJs from "./basics-config-js.js";

export default {
    name: "numerical-config",
    mixins: [BasicsConfigJs],
    methods: {
        numericalI18n(name, text, key) {
            return this.$ti18(name, text, "numericalLang", key);
        },
        //图标
        getIcon(obj) {
            if (obj.dataType == 'string') {
                return 'icon-lineField-String';
            } else if (obj.dataType == 'date') {
                return 'icon-lineriqi2';
            } else  {
                return 'icon-lineshuzi';
            }
        },
    }
}
</script>

<style scoped>
.icon_config {
    display: flex;
    align-items: center;
    grid-gap: 0px 10px;
    cursor: pointer
}

.setup {
    margin-top: -14px;
    padding: 7px;
}

.setup > span {
    display: block;
    min-height: 90px;
}

.setup_tuo {
    background-color: #02c5b7;
    border-radius: 2px;
    display: flex;
    line-height: 26px;
    padding: 0 7px;
    color: white;
    margin-bottom: 5px;
    height: 30px;
}

.inpurlistspan {
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px 0px 0px 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 30px;
    flex: 1;
}

.inpurlistinput {
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    font-size: 14px;
    line-height: 30px;
    flex: 1;
    margin-right: 10px;
}

.dimension_button {
    line-height: 30px;
    text-align: center;
    color: #c0c5cc;
}

.dimension_come {
    margin-top: 13px;
    min-height: 90px;
    background-color: #ffffff;
    border-radius: 4px;
    border: dashed 1px #dadde0;
    padding-top: 15px;
    position: relative;
}

.basicDelete i {
    color: white;
}

.dimension_list span {
    color: #46494d;
    font-size: 12px;
    margin-left: 5px;
}

.dimension_list li {
    line-height: 30px;
    width: 100%;

}

.dimension_list li i:nth-child(1) {
    color: #a0b3ff;
}

.dimension_list li i:nth-child(3) {
    color: #c0c5cc;
    float: right;
    cursor: pointer;
}

.dimension {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding: 0px 5px;
}

.basics-render {
    position: relative;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.basics-render:hover .basics-render-op {
    display: block;
}

.basics-render-op {
    display: none;
    position: absolute;
    top: 24px;
    left: -30px;
    background: white;
    width: 64px;
    text-align: center;
    color: #697377;
    cursor: pointer;
    box-shadow: 0px 0px 6px 0px #ccd1dd;
    border-radius: 4px;
    height: 30px;
    z-index: 9999;
}
</style>
